

<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>课程列表</title>
		<link rel="stylesheet" href="${root}css/seedsui.min.css">
		<style>
		
		.scrollContainer{
            width: 100%;
            height: 100%;
            overflow: auto;
        }
        .menuwrap-tag.active{
   		 color: #656565;
        }
        .menuwrap-tag.active:before{
   		 width: 0px;
        }
        .menuwrap-tag:after{
        border-bottom:0px;
        }
		</style>
	</head>
	<body ontouchstart="">
    <section class="page">
        <header>
            <div class="titlebar">
            	<a class="titlebar-button" href="${root}">
            	<img src="${root}img/logo.png" style="width: 24px;height: 24px;" />
            	</a>
                <div class="inputbox bordered" style="margin:0 8px;border-radius: 40px;" data-input="clear">
                <input id="key" style="padding: 2px 8px;" type="search" value="${p.key!}" placeholder="请输入搜索内容" class="search input-text">
                <i id="searchbtn" class="icon size16 icon-search" style="margin-right: 8px;"></i>
            </div>
                <a class="titlebar-button" href="${root}menu">
            	<i class="icon size24 icon-menudot" ></i>
            	</a>
            </div>
            <ul class="tabbar tabbar-line animated">
            <li class="tab" id="paixu">
                <label class="tab-label" style="font-size: 12px;">综合排序</label>
                <i class="icon size12 icon-arrowdown" style="float: right;margin-top:14px;"></i>
            </li>
            <li class="tab" id="fenlei">
                <label class="tab-label" style="font-size: 12px;">课程分类</label>
                <i class="icon size12 icon-arrowdown" style="float: right;margin-top:14px;"></i>
            </li>
            <li class="tab" id="shaixuan">
                <label class="tab-label" style="font-size: 12px;">筛选</label>
                <i class="icon size12 icon-arrowdown" style="float: right;margin-top:14px;"></i>
            </li>
        </ul>
        
        </header>
        
        
        <!--DfCircle-->
        <article class="container" style="margin-top: 84px;" >
        <ul class="list paixushow hide" style="z-index: 999;position:fixed;width: 100%;">
                <li class="list-li underline btndesc" data-val="id" style="background-color: #f0f0f0;">
                    <p class="list-container">默认最新</p>
                </li>
                <li class="list-li underline btndesc" data-val="num">
                    <p class="list-container">人气排序</p>
                </li>
                </ul>
        <div class="shaixuanshow hide">
        <ul class="grid" data-col="3">
			<li>
				<a class="btnsx button block btnradio" data-type="ptype" data-val="1" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">精品视频</a>
			</li>
			<li>
				<a class="btnsx button block btnradio" data-type="ptype" data-val="vip" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">VIP视频</a>
			</li>
			<li>
				<a class="btnsx button block btnradio" data-type="ptype" data-val="0" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">免费视频</a>
			</li>
			
		</ul>
		<hr/>
		<span>&nbsp;&nbsp;&nbsp;&nbsp;课程内容包含</span>
		 <ul class="grid" data-col="3">
			<li>
				<a class="btnsx button block" data-type="is_zb" data-val="1" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">直播授课</a>
			</li>
			<li>
				<a class="btnsx button block" data-type="type" data-val="培训" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">培训课程</a>
			</li>
			<li>
				<a class="btnsx button block" data-type="is_file" data-val="1" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">课程资料</a>
			</li>
			<li>
				<a class="btnsx button block" data-type="is_exam" data-val="1" style="margin:8px;border-radius: 4px;background-color: #e5e5e5;">习题测验</a>
			</li>
		</ul>
		<br/>
		<hr/>
            <div class="titlebar">
            <a class="titlebar-button" onclick="location.reload();">
                <small class="clearsx" style="color: #333;">清空筛选</small>
            </a>
            <h1 class="titlebar-title text-center"></h1>
            <a id="btnshaixuan" class="titlebar-button button primary" style="width:60px;">
                <span>筛选</span>
            </a>
        </div>
        </div>
        <div class="menuwrap hide" style="height: 354px;z-index: 999;position:fixed;width: 100%;">
                <div class="menuwrap-side" style="width: 105px;">
                	<div style="height: 39px;border-bottom:0px;" data-css="wrap" class="menuwrap-tag  side">
                        <p class="menuwrap-tag-inner">
                        全部
                        </p>
                    </div>
                    <!--:for(c in cache.cates!){  -->
                    <div style="height: 39px;border-bottom:0px;" data-css="wrap${cLP.index}" class="menuwrap-tag ${cLP.index==1?'active':''} side${cLP.index}">
                        <p class="menuwrap-tag-inner">
                        ${c.name!}
                        </p>
                    </div>
                    <!--:}  -->
                </div>
                <div class="menuwrap-main wrap " style="display: none" >
                    <div style="height: 354px;background-color: white;">
                    <ul class="list">
                    <li class="list-li underline cid" data-val="">
                    <p class="list-container">全部</p>
                	</li>
                    </ul>
                    </div>
                </div>
                <!--:for(c in cache.cates!){  -->
                <div class="menuwrap-main wrap${cLP.index} " style="display: ${cLP.index==1?'block':'none'}" >
                    <div style="height: 354px;background-color: white;">
                    <ul class="list">
                    <li class="list-li underline cid" data-val="${c.id}">
                    <p class="list-container">全部</p>
                	</li>
                    <!--:for(l in c.list!){  -->
                    <li class="list-li underline cid" data-val="${l.id}">
                    <p class="list-container">${l.name!}</p>
                	</li>
                    <!--:}  -->
                    </ul>
                    </div>
                </div>
                <!--:}  -->
            </div>

            <div class="scrollContainer">
                <ul class="list" id="list"></ul>
            </div>
        </article>
        <!--DfPull-->
        <!-- <article>
                <ul class="list" id="ID-List"></ul>
        </article> -->
    </section>

		
		<!--- third -->
		<script src="${root}assets/third/jquery/jquery-2.1.3.min.js"></script>
    <script src="${root}js/seedsui.min.js"></script>
		<script src="${root}js/url.js"></script>
		<script>
		var param={key:'${p.key}',cid:'${p.cid!""}',ptype:'${p.price!""}'}
		var view={
	            /*=========================
	              Model
	              ===========================*/
	            render:function(){
	                var self = this;
	                this.pagination={
	                    hasData:null,
	                    current:1,//当前页数
	                    max:${obj.pager.pageCount!0},//总页数
	                    limit:10,//每页条数
	                    total:${obj.pager.recordCount!0}//总条数
	                }
	                //插件

	                //DfPull
	                this.drag=new DragPull({
	                    overflowContainer:"article .scrollContainer",
	                    topParent:"article .scrollContainer",
	                    bottomParent:"article .scrollContainer",
	                //DfCircle
	                /*this.drag=DfCircle({
	                    overflowContainer:"article .scrollContainer",
	                    topParent:"article",
	                    bottomParent:"article .scrollContainer",*/

	                    //topContainer:false,//禁用头部下拉
	                    //bottomContainer:false,//禁用底部加载
	                    onTopRefresh:function(e){
	                        console.log("头部刷新");
	                        self.pagination.current=1;
	                        self._loadData();
	                    },
	                    onTopComplete:function(e){
	                        console.log("头部完成");
	                    },
	                    onBottomRefresh:function(e){
	                        console.log("底部刷新");
	                        self.pagination.current++;
	                        
	                        self._loadData(true);//下一页
	                    },
	                    onBottomComplete:function(e){
	                        console.log("底部完成");
	                    },
	                    onBottomNoData:function(e){
	                        console.log("底部无数据了");
	                    }
	                });

	                //渲染页面
	                
	                //加载数据
	                this._loadData();

	                this._attach();//使用backbone时，此行无用
	            },
	            refresh:function(){
	                console.log("刷新");
	            },
	            destroy:function(){
	                console.log("移除");
	            },
	            
	            /*=========================
	              Method
	              ===========================*/
	            _loadData:function(isNext){
	                var self=this;
	                //如果是最后一页
	                if(isNext && self.pagination.current>self.pagination.max){
	                    self.pagination.current--;
	                    //drag标识底部状态
	                    self.drag.setPagination(isNext, true)
	                    return;
	                }
	                /*
	                //ajax请求*/
	                $.ajax({
	                    url: '${root}json/course/index?num='+self.pagination.current,
	                    data: param,
	                    //type: 'post',
	                    //xhrFields:{withCredentials: true },
	                    //crossDomain:true,
	                    dataType: "json",
	                    //dataType: "jsonp",
	                    //jsonp: 'callback',
	                    //jsonpCallback:"success_jsonpCallback",
	                    success: function(data){
	                        var data=Object.prototype.toString.call(data)==='[object String]'?JSON.parse(data):data;
	                        if(!data){
	                            drag.topComplete();
	                            drag.bottomNoData();
	                            toast.setHTML("请求数据失败，请重试");
	                            toast.show();
	                            return;
	                        }
	                        //分页
	                        self.pagination.hasData=true;
	                        self.pagination.total = data.pager.recordCount;
	                        //self.pagination.limit = data.limit;
	                        self.pagination.max=Math.ceil(self.pagination.total/self.pagination.limit);

	                        //此处生成html字符串
	                        var html="";
	                        for ( var i in data.list) {
								var course=data.list[i];
								var price=course.price;
								if(price==undefined){
									break;
								}
								var price_color="#16c447";
								var vip=course.vip;
								if(price>0){
									price="￥"+price;
									price_color="#ff5656";
								}else{
									if(vip>0){
										price="VIP免费"
											price_color="#f4984e";
									}else{
										price="免费"
									}
								}
	                        html+="<li class=\"list-li underline\" onclick=\"location.href='${root}course/"+course.id+"'\">\n" +
	                        	"                    \n" +
	                        	"                        <img style=\"height: 80px;width: 120px;margin-right: 10px;\" data-load-src=\"http://miap.cc:9100/img/group1/M00/02/F3/wKigolgAPbaARA0iAAgPSpjZZOk244.JPG_264x168\" src=\"${www}"+course.img+"\" data-error-src=\"images/list-default.png\">\n" +
	                        	"                        <div class=\"sticker sticker-icon top left hide\">\n" +
	                        	"                            <span class=\"size12 icon-fav-fill\"></span>\n" +
	                        	"                        </div>\n" +
	                        	"                    <div class=\"list-container\">\n" +
	                        	"                        <div class=\"list-title\" style=\"white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">\n" +
	                        	"                           "+course.title+"\n" +
	                        	"                        </div>\n" +
	                        	"                        <div class=\"list-row\">\n" +
	                        	"                            <p class=\"list-font\" style=\"color: #666;font-size:12px;\">\n" +
	                        	"                              	讲师: "+course.teacher+"\n" +
	                        	"                            </p>\n" +
	                        	"                        </div>\n" +
	                        	"                        <div class=\"list-row\">\n" +
	                        	"		                            <small class=\"bottom nowrap\" style=\"padding-right: 20px;color:"+price_color+";\">"+price+"</small>\n" +
	                        	"                        </div>\n" +
	                        	"                        <div class=\"list-row\">\n" +
	                        	"		                            <small class=\"bottom nowrap\" style=\"padding-right: 20px;color:#bf1200;\">已报名:"+course.num+"</small>\n" +
	                        	"		                            <small class=\"bottom right nowrap\" style=\"right:0px;position:absolute;padding-right: 20px;color:#2196f3;\">"+course.agency_name+"</small>\n" +
	                        	"                        </div>\n" +
	                        	"                    </div>\n" +
	                        	"                </li>";
	                        }
	                        //头部刷新或者下一页
	                        if(!isNext){
	                            $("#list").html(html);
	                            //drag标识头部状态
	                            self.drag.topComplete();
	                        }else{
	                            $("#list").append(html);
	                            //drag标识底部状态
	                            self.drag.bottomComplete();
	                        }
	                        //如果没有超过一页
	                        if(self.pagination.total <= self.pagination.limit){
	                            //drag标识底部状态
	                            //self.drag.bottomNoData();
	                        }
	                    },
	                    error: function(){
	                        if(isNext)self.pagination.current--;
	                        self.drag.topComplete();
	                        self.drag.bottomNoData();
	                        self.toast.setHTML("请求数据失败，请重试");
	                        self.toast.show();
	                    },
	                    complete:function(){
	                        //self.loading.hide();
	                    }
	                });
	                
	                /*静态页面测试
	                this.pagination.max=10;
	                //此处生成html字符串
	                var html="";
	                for(var i=0;i<this.pagination.limit;i++){
	                    html+='<li class="list-li underline"><p>第'+i+'行列表</p></li>';
	                }
	                //头部刷新或者下一页
	                if(!isNext){
	                    setTimeout(function(){
	                        document.getElementById("list").innerHTML=html;
	                        //drag标识头部状态
	                        self.drag.topComplete();
	                    }, 2000);
	                }else{
	                    setTimeout(function(){
	                        document.getElementById("list").innerHTML+=html;
	                        //drag标识底部状态
	                        self.drag.bottomComplete();
	                    }, 500);
	                }*/
	            },
	            /*=========================
	              Events
	              ===========================*/
	            _attach:function(e){
	            },
	            /*=========================
	              Event Handler
	              ===========================*/
	        }

	        window.addEventListener("load",function(){
	            view.render();
	        }, false);
	        
	        $(function(){
	        	$(".menuwrap-tag").click(function(){
	        		$(".menuwrap-tag").removeClass("active")
	        		$(this).addClass("active")
	        		
	        		$(".menuwrap-main").css("display","none")
	        		$("."+$(this).attr("data-css")).css("display","block")
	        	})
	        	
	        	$('#fenlei').on('click', function(){
	        		if(!$(".paixushow").hasClass("hide")){//关闭排序
	        			$(".paixushow").addClass("hide")
	        		}
	        		if(!$(".shaixuanshow").hasClass("hide")){//关闭筛选
	        			$(".shaixuanshow").addClass("hide")
	        		}
	        		if($(".menuwrap").hasClass("hide")){
	        			$(".menuwrap").removeClass("hide")
	        			$(this).find("i").removeClass("icon-arrowdown").addClass("icon-arrowup")
	        		}else{
	        			$(".menuwrap").addClass("hide")
	        			$(this).find("i").removeClass("icon-arrowup").addClass("icon-arrowdown")
	        		}
				});
	        	$('#paixu').on('click', function(){
	        		if(!$(".menuwrap").hasClass("hide")){//关闭分类
	        			$(".menuwrap").addClass("hide")
	        		}
	        		if(!$(".shaixuanshow").hasClass("hide")){//关闭筛选
	        			$(".shaixuanshow").addClass("hide")
	        		}
	        		if($(".paixushow").hasClass("hide")){
	        			$(".paixushow").removeClass("hide")
	        			$(this).find("i").removeClass("icon-arrowdown").addClass("icon-arrowup")
	        		}else{
	        			$(".paixushow").addClass("hide")
	        			$(this).find("i").removeClass("icon-arrowup").addClass("icon-arrowdown")
	        		}
				});
	        	$('#shaixuan').on('click', function(){
	        		if(!$(".menuwrap").hasClass("hide")){//关闭分类
	        			$(".menuwrap").addClass("hide")
	        		}
	        		if(!$(".paixushow").hasClass("hide")){//关闭排序
	        			$(".paixushow").addClass("hide")
	        		}
	        		if($(".shaixuanshow").hasClass("hide")){
	        			$(".shaixuanshow").removeClass("hide")
	        			$(this).find("i").removeClass("icon-arrowdown").addClass("icon-arrowup")
	        		}else{
	        			$(".shaixuanshow").addClass("hide")
	        			$(this).find("i").removeClass("icon-arrowup").addClass("icon-arrowdown")
	        		}
				});
	        	
	        	$(".btnsx").on('click', function(){
	        		if($(this).hasClass("outline")){
	        			$(this).removeClass("outline").removeClass("primary").css("background-color","#e5e5e5")
	        			var this_type=$(this).attr("data-type");
	        			$.each(param,function(key,value){
	        				if(key==this_type){
	        					param[key]=null;
	        				}
	        				}); 
	        		}else{
	        			if($(this).hasClass("btnradio")){
	        				$(".btnradio").removeClass("outline").removeClass("primary").css("background-color","#e5e5e5")
	        				var this_type=$(this).attr("data-type");
	        				var this_val=$(this).attr("data-val");
	        				$.each(param,function(key,value){
		        				if(key==this_type){
		        					param[key]=this_val;
		        				}
		        			}); 
	        			}else{
	        				param[$(this).attr("data-type")] = $(this).attr("data-val");  
	        			}
	        			
	        			
	        			
	        			$(this).addClass("outline").addClass("primary").css("background-color","white")
	        		}
	        		
				});
	        	//开始筛选
	        	$("#btnshaixuan").on('click', function(){
	        		$(".shaixuanshow").addClass("hide")
	        		view._loadData(false);
	        	})
	        	
	        	$(".clearsx").on('click', function(){
	        		$(".shaixuanshow").addClass("hide")
	        		param={};
	        		view._loadData(false);
	        	})
	        	$("#searchbtn").on('click', function(){
	        		if($("#key").val().trim().length>0){
	        			param["key"]=$("#key").val();
		        		view._loadData(false);
	        		}else{
	        			param["key"]="";
		        		view._loadData(false);
	        		}
	        	})
	        	$("#key").on('search', function(){
	        		if($("#key").val().trim().length>0){
	        			param["key"]=$("#key").val();
		        		view._loadData(false);
	        		}else{
	        			param["key"]="";
		        		view._loadData(false);
	        		}
	        		$(this).blur();
	        	})
	        	$(".cid").on('click', function(){
	        			param["cid"]=$(this).attr("data-val");
		        		view._loadData(false);
		        		$(".menuwrap").addClass("hide")
	        	})
	        	
	        	$('.btndesc').on('click', function(){
        			param["desc"]=$(this).attr("data-val");
	        		view._loadData(false);
	        		$(".paixushow").addClass("hide")
        		})
	        })
		
		function back(){history.go(-1);}
		</script>
	</body>
</html>